<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .relative {
        width: 1000px;
        height: 600px;
        background-color: rgb(255, 255, 255);
        box-shadow: 0px 0px 5px #b1adad;
        position: relative;
        top: 50px;
        left: 220px;
    }
    
    .Hei {
        width: 350px;
        height: 550px;
        background-color: rgb(13, 10, 46);
        position: fixed;
        top: 80px;
        left: 700px;
    }
    
    .Hon {
        width: 320px;
        height: 190px;
        background-color: rgb(240, 200, 195);
        position: fixed;
        top: 490px;
        left: 550px;
        box-shadow: 0px 0px 8px #a7a6a6;
    }
    
    .firheaA {
        position: fixed;
        top: 230px;
        left: 450px;
        box-shadow: 0px 0px 8px #a7a6a6;
    }
    
    .phll {
        color: rgb(255, 254, 254);
        position: fixed;
        top: 230px;
        left: 780px;
    }
    
    .leiron {
        width: 200px;
        height: 150px;
        color: rgb(103, 105, 107);
        position: fixed;
        top: 280px;
        left: 780px;
        font: bold 2px Helvetica;
    }
    
    .LM {
        width: 110PX;
        height: 20PX;
        color: rgb(161, 228, 175);
        background-color: #fff;
        position: fixed;
        top: 390px;
        left: 780px;
    }
    
    .Exp {
        color: rgb(238, 160, 234);
        position: fixed;
        top: 490px;
        left: 580px;
    }
    
    .Axe {
        width: 280px;
        height: 30px;
        color: #000;
        position: fixed;
        font: bold 2px Helvetica;
        top: 540px;
        left: 580px;
    }
    
    .VPO {
        width: 135PX;
        height: 25px;
        border: 2px solid;
        position: fixed;
        color: rgb(255, 255, 255);
        top: 600px;
        left: 580px;
    }
</style>

<body>
    <div class="relative">
        <div class="Hei">
            <h4 class="phll">phllosophy</h4>
            <div class="leiron">
                <dr>A large part of China's energy consumption comes from coal.</dr>
                <dr>In the future, the share of coal in China's overall energy consumption</dr>
                <dr>will decline, but coal consumption will continue to increase. Similarly</dr>
            </div>
            <h6 class="LM">LEARN MORE</h6>
        </div>
        <img class="firheaA" src="http://via.placeholder.com/300x300" alt="">
        <div class="Hon">
            <h6 class="Exp">Experience</h6>
            <p class="Axe">
                <dr>Compared with big cities, small cities are</dr>
                <dr>close to nature. The economic development</dr>
                <dr>of small cities is not as good as that of big cities.</dr>
                <dr>The number of cars and the number of residents </dr>
            </p>
            <h5 class="VPO">VIEW PORTFOLIO</h5>
        </div>



    </div>

</body>

</html>